<template>
    <div class="box">
        <headView></headView>
        <div class="banner">
            <template>
                <el-carousel height="500px" trigger="click">
                    <el-carousel-item v-for="item in bannerList" :key="item.id">
                        <img :src="item.imgUrl" alt="">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <!--  -->
        <div class="fenleiAll">
            <div class="title">全部分类</div>
            <ul>
                <li v-for="item in categoriesAll" :key="item.id" @click="GoTowPage(item.id)">
                    <img :src="item.picture" alt="">
                    <p>{{ item.name }}</p>
                </li>
            </ul>
        </div>
        <!--  -->
        <div class="cart_list" v-for="items in categoriesAll" :key="items.id">
            <div class="title">- {{ items.name }} -</div>
            <div class="tag">温暖柔软，品质之选</div>
            <div class="gengduo" @click="gengduo(items.id)">查看更多 ></div>
            <div class="card">
                <div class="cart_item" v-for="item in items.goods" :key="item.id" @click="goXQ(item.id)">
                    <el-card shadow="hover">
                        <img :src="item.picture" alt="">
                        <p class="name">{{ item.name }}</p>
                        <p class="desc">{{ item.desc }}</p>
                        <p class="price">￥{{ item.price }}</p>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headView from "../../components/HeadView.vue";
export default {
    name: "categoryView",
    components: {
        headView,
    },
    data() {
        return {
            categoriesAll: [],
            bannerList: [],
        }
    },
    watch: {
        //两种方式
        //监听路由参数改变即请求 1
        // "$route.query.oneId": {
        //     immediate: true, // 一开始的数据也要当做一种变化
        //     handler(val, old) {
        //         console.log("id 变化了", val, old)
        //     }
        // },


        // 监听路由变化 2
        $route(to, from) {
            console.log(to, from)
            console.log("改变后的路由参数", to.query.oneId)
            // 全部分类数据
            const id = this.$route.query.oneId;
            this.$api.categoryAllList(id).then(res => {
                this.categoriesAll = res.data.result.children;
            });
        }
    },

    created() {
        //通过id获取数据
        this.$nextTick(() => {
            // 全部分类数据
            const id = this.$route.query.oneId;
            this.$api.categoryAllList(id).then(res => {
                this.categoriesAll = res.data.result.children;
            });
            //banner数据
            this.$api.bannerList().then(res => {
                this.bannerList = res.data.result;
            })
        })
    },
    methods: {
        //二级导航跳转
        GoTowPage(val) {
            this.$router.push({ name: 'navItem', query: { towId: val } })
            // html 取参  $route.query.id
            // script 取参  this.$route.query.id
            console.log('二级id', val);
        },
        //跳转详情页
        goXQ(val) {
            console.log('详情页id', val);
            //const id = val;
            //this.$router.push({ name: '', query: { detailId: id } });
        },
        //查看更多 与二级导航一样
        gengduo(val) {
            console.log('查看更多id', val);
            this.$router.push({ name: 'navItem', query: { towId: val } })
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    background-color: #F5F5F5;
}

.banner {
    width: 1240px;
    height: 500px;
    margin: 0 auto;
}

.el-carousel {
    width: 1240px;
    height: 500px;
}

.el-carousel__item {
    width: 1240px;
    height: 500px;
}


.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.fenleiAll {
    width: 1240px;
    height: 260px;
    margin: 20px auto;
    background-color: rgb(255, 255, 255);

    .title {
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 28px;
    }

    ul {
        width: 100%;
        height: 160px;
        padding: 0 32px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        li {
            font-size: 16px;
            color: #333333;

            img {
                width: 100px;
                height: 100px;
                display: block;
                margin: 0 auto;
            }

            p {
                width: 168px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }

            p:hover {
                color: #27BA9B;
            }
        }
    }
}

.cart_list {
    width: 1240px;
    height: 460px;
    margin: 20px auto;
    background-color: white;
    position: relative;

    .title {
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 28px;
        color: #666666;
    }

    .tag {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        color: #999999;
        text-align: center;
    }

    .gengduo {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 16px;
        color: #999999;
    }

    .gengduo:hover {
        color: #27BA9B;
    }

    .card {
        width: 1240px;
        height: 330px;
        box-sizing: border-box;
        padding: 0 65px 30px;
        display: flex;

        .cart_item {
            width: 200px;
            height: 260px;
            margin: 20px 10px 0 0;

            p {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            img {
                width: 160px;
                height: 160px;
            }

            .name {
                width: 160px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                color: #333333;
                text-align: center;
            }

            .desc {
                width: 160px;
                height: 28px;
                line-height: 28px;
                font-size: 14px;
                color: #999999;
                text-align: center;
            }

            .price {
                width: 160px;
                height: 38px;
                line-height: 38px;
                font-size: 20px;
                color: #cf4444;
                text-align: center;
            }
        }

        .cart_item:hover {
            transform: translateY(-8px);
            transition: 0.4s;
        }
    }
}
</style>